<script setup lang="ts">
import {router} from "../../main.ts";
import {onMounted, ref} from "vue";
import myAxios from "../../plugins/myAxios.ts";
import {showToast} from "vant";
import { showConfirmDialog } from 'vant';
const onClickLeft = () => {
  router.push('/user')
}

interface Item {
  // interface 改成 type 也行
  id: number;
  title: string;
  content: string;
  thumbNum: number;
  favourNum: number;
}

const postDetails = (item: Item) => {
  router.push({
    path: '/my/post/details',
    query: {
      id: item.id,
      title: item.title,
      content: item.content,
      thumbNum: item.thumbNum,
      favourNum: item.favourNum,
    }
  })
}

onMounted(() => {
  myAxios.get('/user/post/my')
      .then(res => {
        list.value = res.data.data;
      })
      .catch(err => {
        console.log(err);
      });
})

const list = ref<Item[]>([]); // 使用 ref 创建响应式变量

const deletePost = (id: number, event: Event) => {
  event.stopPropagation();


  showConfirmDialog({
    title: '删除',

    message:
        '你真的要删除这篇帖子吗？',
  })
      .then(() => {
        // on confirm
        myAxios.get('/post/delete', {params: {postId: id}})
            .then(res => {
              if(res.data.data){
                const index = list.value.findIndex(item => item.id === id);
                list.value.splice(index, 1);
                showToast('删除成功');
              }else{
                showToast('删除失败');
              }
            })
            .catch(err => {
              console.log(err);
            })
      })
      .catch(() => {
        // on cancel
      })
}

</script>

<template>
  <!-- 顶部导航栏 -->
  <van-nav-bar class="nav-bar"
               title="我的帖子"
  ></van-nav-bar>

  <img src="../../assets/最终返回键.png" class="back-btn" @click="onClickLeft" alt="">

  <img src="../../assets/最终刷新图片2.png" class="haha" alt="加载中" />
  <img src="../../assets/动图2.gif" class="haha" style="left:5%; top:2%" alt="加载中" />

  <div class="container">
    <van-card
        class="show-card"
        v-for="item in list"
        :title="item.title"
        :desc="item.content"
        @click="postDetails(item)"
    >
      <template #footer>
        <div class="footer">
          <van-image  @click="($event) => deletePost(item.id, $event)"
                      style="z-index: 10; width: 10%; height:50%; left: 90%; position: absolute; cursor: pointer; "
                      src="https://lanyun-1325629469.cos.ap-chongqing.myqcloud.com/test/common_btn_jian.png">
          </van-image>
        </div>
      </template>
    </van-card>
  </div>
</template>

<style scoped>
.footer {
  width: 100%;
  height: 50%;
  position: absolute;
  top: -5%
}

.show-card {
  margin-top: 10px;
  width: 90%;
  height: 100px;
  margin-left: 5%;
  border-radius: 10px;
  top: 8%;
}

.back-btn {
  position: fixed;
  float: left;
  top: -5px;
  width: 50px;
  height: 60px;
  z-index: 2;
}

.haha {
  /*在各种手机的中间显示*/
  top: 5%;
  left: 70%;
  /*设置宽高*/
  width: 100px;
  height: 100px;
  /*设置居中*/
  position: absolute;
  margin: auto;
}

.nav-bar {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 46px;
  background-image: url("../../assets/导航栏2.png");
  opacity: 0.6;
  z-index: 1;
}

.container {
  position: relative;
  margin-top: 46px;
  padding: 10px;
  height: calc(100vh - 46px);
  overflow-y: auto;
}
</style>
